<template>
  <div>
    <!-- 时间 -->
    <div class="d-flex align-center mb-1">
      <v-icon class="mr-1" :icon="mdiClockOutline" size="16" />
      <span class="text-h6 font-weight-medium one-line">
        {{ formatEventTime(note.event_start_time, note.event_end_time) }}
      </span>
    </div>

    <!-- 地点（可选） -->
    <div v-if="note.event_location" class="d-flex align-center mb-1 opacity-90">
      <v-icon class="mr-1" :icon="mdiMapMarker" size="16" />
      <span class="one-line">{{ note.event_location }}</span>
    </div>

    <!-- 参与者（存在则显示头像/姓名，否则名称文本） -->
    <div
      v-if="
        (eventAttendeeUsers && eventAttendeeUsers.length > 0) ||
        (note.event_attendees && note.event_attendees.length > 0)
      "
      class="d-flex align-center mb-1 opacity-90"
    >
      <v-icon class="mr-1" :icon="mdiAccountMultiple" size="16" />
      <template v-if="eventAttendeeUsers && eventAttendeeUsers.length > 0">
        <template v-for="(u, idx) in eventAttendeeUsers.slice(0, 3)" :key="idx">
          <v-avatar class="mr-1 border-white" size="20">
            <v-img v-if="u.avatar" :alt="u.name" :src="u.avatar" />
            <v-icon v-else :icon="mdiAccount" size="16" />
          </v-avatar>
          <span class="text-caption mr-2 one-line">{{ u.name }}</span>
        </template>
        <span v-if="eventAttendeeUsers.length > 3" class="text-caption text-medium-emphasis"
          >+{{ eventAttendeeUsers.length - 3 }}</span
        >
      </template>
      <template v-else>
        <span class="text-caption one-line">{{ (note.event_attendees || []).join(', ') }}</span>
      </template>
    </div>

    <!-- 描述两行摘要（解析特殊标记为可点击 Chip） -->
    <div class="line-clamp-2 opacity-80">
      <NoteContentRenderer
        :content="note.content"
        @click-company="handleClickCompany"
        @click-contact="handleClickContact"
        @click-user="handleClickUser"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import NoteContentRenderer from '../common/NoteContentRenderer.vue'
import { mdiAccount, mdiAccountMultiple, mdiClockOutline, mdiMapMarker } from '@mdi/js'
import type { Note, User } from '../../types'

const props = defineProps<{ note: Note }>()

const eventAttendeeUsers = computed<User[]>(() => (props.note as any).event_attendee_users || [])

// 点击 chips 事件（可由上层接管导航）
function handleClickUser(p: { id: number; name: string }) {
  console.debug('[EventNote] click-user', p)
}
function handleClickContact(p: { contactId: number; companyId: number; name: string }) {
  console.debug('[EventNote] click-contact', p)
}
function handleClickCompany(p: { id: number; name: string }) {
  console.debug('[EventNote] click-company', p)
}

function formatEventTime(startTime?: number, endTime?: number): string {
  if (!startTime) return ''
  const start = new Date(startTime)
  const end = endTime ? new Date(endTime) : null

  const dateStr = start.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
  const startTimeStr = start.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  if (end) {
    const endTimeStr = end.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
    return `${dateStr} ${startTimeStr} - ${endTimeStr}`
  }
  return `${dateStr} ${startTimeStr}`
}
</script>
<style scoped></style>
